<template>
	<el-dialog title="预设步骤对话框" v-model="visible" customClass="customWidth" destroy-on-close
			   @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
			<sc-form-table v-model="preStepList" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
				<el-table-column prop="stepId" label="步骤名称" width="200">
					<template #default="scope">
						<el-select v-model="scope.row.stepId">
							<el-option v-for="item in stepList" :value="item.stepId" :label="item.stepName"></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="opUser" label="主办人员" width="150">
					<template #default="scope">
						{{ scope.row.opUserName }}
						<el-button text type="primary" size="small" @click="setOpUser(scope.row, scope.$index)"
								   style="float: right">选择
						</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="otherUser" label="经办人员" width="200">
					<template #default="scope">
						{{ scope.row.otherUserName }}
						<el-button text type="primary" size="small" @click="setOtherUser(scope.row, scope.$index)"
								   style="float: right">选择
						</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="sendToUser" label="抄送人员" width="200">
					<template #default="scope">
						{{ scope.row.sendToUserName }}
						<div v-if="scope.row.stepId!=null&&scope.row.stepId!=''" style="display: inline;">
							<el-button text type="primary" size="small" @click="setSendToUser(scope.row, scope.$index)"
									   style="float: right" v-if="bpmStepConfig[scope.row.stepId].autoSendType=='2'">选择
							</el-button>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="remindNextUser" label="消息提醒" width="250">
					<template #default="scope">
						<div v-if="scope.row.stepId!=null&&scope.row.stepId!=''"
							 style="overflow: auto;max-height: 50px;">
							<msg-box-check-box v-if="bpmStepConfig[scope.row.stepId].remindNextUser!='0'"
											   v-model:msgType="scope.row.remindNextUser" code="bpm-approved"
											   label="提醒审批人"></msg-box-check-box>
							<msg-box-check-box v-if="bpmStepConfig[scope.row.stepId].remindCreateUser!='0'"
											   v-model:msgType="scope.row.remindCreateUser" code="bpm-create"
											   label="提醒创建人"></msg-box-check-box>
							<msg-box-check-box v-if="bpmStepConfig[scope.row.stepId].remindParticipant!='0'"
											   v-model:msgType="scope.row.remindParticipant" code="bpm-join"
											   label="提醒参与人"></msg-box-check-box>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="msgContent" label="提醒内容" width="200">
					<template #default="scope">
						<el-input v-model="scope.row.msgContent" placeholder="请输入提醒内容" maxlength="380"
								  v-if="scope.row.remindNextUser!=''||scope.row.remindCreateUser!=''||scope.row.remindParticipant!=''"></el-input>
					</template>
				</el-table-column>
			</sc-form-table>
			<el-card header="消息提醒"
					 v-if="bpmStep.remindNextUser!='0'||bpmStep.remindCreateUser!='0'||bpmStep.remindParticipant!='0'">
				<msg-box-check-box v-if="bpmStep.remindNextUser!='0'" v-model:msgType="form.remindNextUser"
								   code="bpm-approved" label="提醒审批人"></msg-box-check-box>
				<msg-box-check-box v-if="bpmStep.remindCreateUser!='0'" v-model:msgType="form.remindCreateUser"
								   code="bpm-create" label="提醒创建人"></msg-box-check-box>
				<msg-box-check-box v-if="bpmStep.remindParticipant!='0'" v-model:msgType="form.remindParticipant"
								   code="bpm-join" label="提醒参与人"></msg-box-check-box>
				<el-form-item label="消息内容"
							  v-if="form.remindNextUser!=''||form.remindCreateUser!=''||form.remindParticipant!=''">
					<el-input v-model="form.msgContent" placeholder="消息内容为空时,系统自动生成消息" type="textarea" maxlength="380"
							  rows="3" clearable></el-input>
				</el-form-item>
			</el-card>
			<el-card header="流程抄送" v-if="bpmStep.autoSendType=='2'">
				<el-form-item label="人员选择">
					<select-user-dialog v-model:accountId="form.autoSendUser" :mode="true"/>
				</el-form-item>
			</el-card>

		</el-form>
		<select-user-for-bpm v-model:accountId="tempOpUser" ref="selectBpmOpUserDialog" :stepId="tempStepId"
							 :tempOrgId="tempOrgId" :mode="false" :isNotShowBtn="true" resType="1"
							 @success="setOpUserRes"/>
		<select-user-for-bpm v-model:accountId="tempOtherUser" ref="selectBpmOtherUserDialog" :stepId="tempStepId"
							 :tempOrgId="tempOrgId" :mode="true" :isNotShowBtn="true" resType="1"
							 @success="setOtherUserRes"/>
		<select-user-dialog v-model:accountId="tempSendToUser" ref="selectUserDialog" :is-not-show-btn="true"
							:mode="true" @success="setSendToUserRes"/>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">提交</el-button>
		</template>
	</el-dialog>
</template>

<script>

import msgBoxCheckBox from "@/views/module/msgBoxCheckBox";
import selectUserForBpm from "@/views/module/selectUserForBpm";
import selectUserDialog from "@/views/module/selectUserDialog";
import useTabs from "@/utils/useTabs";

export default {
	components: {selectUserForBpm, selectUserDialog, msgBoxCheckBox},
	emits: ['success', 'closed'],
	props: {
		tempOrgId: String,
		runId: String,
		flowId: String,
		stepRunId: String,
		bpmStep: Object
	},
	data() {
		return {
			tempOrgId: this.tempOrgId,
			tempOpUser: '',
			tempOtherUser: '',
			tempSendToUser: '',
			tempStepId: '',
			stepList: [],
			preStepList: [],
			form: {
				runId: this.runId,
				flowId: this.flowId,
				stepRunId: this.stepRunId,
				nextStepInfo:'',
				remindNextUser: '',
				remindCreateUser: '',
				remindParticipant: '',
				msgContent: '',
				autoSendUser: '',
			},
			bpmStepConfig: {},
			bpmStep: this.bpmStep,
			tempRow: null,
			addTemplate: {
				stepId: '',
				opUser: '',
				opUserName: '',
				otherUser: '',
				otherUserName: '',
				sendToUser: '',
				sendToUserName: '',
				remindNextUser: '',
				remindCreateUser: '',
				remindParticipant: '',
				msgContent:''

			},
			rules: {},
			visible: false,
			isSaveing: false,
		}
	},
	mounted() {
		this.getBpmStepListByFlowId(this.flowId);
	},
	methods: {
		//显示
		open() {
			this.visible = true;
			return this;
		},
		async submit() {
			let flag = this.testNextStepListInfo();
			if(flag===true)
			{
				this.form.nextStepInfo = JSON.stringify(this.preStepList);
				var res = await this.$API.bpm.bpmStepPreset.setBpmStepPreset.post(this.form);
				console.log(res);
				if (res.code == 200) {
					useTabs.close();
				}else {
					this.$alert(res.message, "提示", {type: 'error'})
				}
			}

		},
		setOpUser(row, index) {
			this.tempRow = row;
			this.tempOpUser = '';
			this.tempStepId = row.stepId;
			this.$nextTick(() => {
				this.$refs.selectBpmOpUserDialog.selectOrgUser();
			})
		},
		setOpUserRes(userList) {
			if ((this.tempRow.otherUser + ',').indexOf(userList[0].accountId + ',') < 0) {
				this.tempRow.opUser = userList[0].accountId;
				this.tempRow.opUserName = userList[0].userName;
			} else {
				this.$alert(userList[0].userName + "已在经办人员中！", "提示", {type: 'error'})
			}
		},
		setOtherUser(row, index) {
			this.tempRow = row;
			this.tempOtherUser = '';
			this.tempStepId = row.stepId;
			this.$nextTick(() => {
				this.$refs.selectBpmOtherUserDialog.selectOrgUser();
			})
		},
		setOtherUserRes(userList) {
			let accountArr = [];
			let userNameArr = [];
			for (let i = 0; i < userList.length; i++) {
				if (this.tempRow.opUser != userList[i].accountId) {
					accountArr.push(userList[i].accountId)
					userNameArr.push(userList[i].userName)
				}
			}
			this.tempRow.otherUser = accountArr.join(",")
			this.tempRow.otherUserName = userNameArr.join(",");
		},
		setSendToUser(row, index) {
			this.tempRow = row;
			this.tempSendToUser = '';
			this.$nextTick(() => {
				this.$refs.selectUserDialog.selectOrgUser();
			})
		},
		setSendToUserRes(userList) {
			let accountArr = [];
			let userNameArr = [];
			for (let i = 0; i < userList.length; i++) {

				accountArr.push(userList[i].accountId)
				userNameArr.push(userList[i].userName)
			}
			this.tempRow.sendToUser = accountArr.push(",");
			this.tempRow.sendToUserName = userNameArr.join(",");
		},
		async getBpmStepListByFlowId(flowId) {
			var res = await this.$API.bpm.bpmStep.getBpmStepListByFlowId.get({flowId: flowId});
			if (res.code == 200) {
				this.stepList = res.data;
				this.stepList.forEach(item => {
					this.bpmStepConfig[item.stepId] = item;
				})
			}
		},
		testNextStepListInfo() {
			if(this.preStepList.length==0)
			{
				this.$alert("预设步骤不能为空！", "提示", {type: 'error'});
				return false;
			}else {
				for (let i = 0; i < this.preStepList.length; i++) {
					if (this.preStepList[i].stepId === '') {
						this.$alert("存在空步骤节点，请删除后再提交！", "提示", {type: 'error'});
						return false;
					}
					if (this.preStepList[i].opUser === '') {
						this.$alert(this.bpmStepConfig[this.preStepList[i].stepId].stepName + "中的主办人不存在！", "提示", {type: 'error'});
						return false
					}
				}
				return true;
			}
		}
		//表单注入数据
	}
}
</script>
<style>
.customWidth {
	width: 60%;
}
</style>
